// frontend/src/admin/Dashboard.js
import React, { useState, useEffect, useCallback } from "react";
import { Card, Col, Row, Statistic, message } from "antd";
import {
  HomeOutlined,
  CheckSquareOutlined,
  DollarOutlined,
} from "@ant-design/icons";
import { adminAPI } from "../services/api";

const Dashboard = () => {
  const [overview, setOverview] = useState({
    totalRooms: 0,
    availableRooms: 0,
    occupiedRooms: 0,
    todayRevenue: 0,
  });
  const [loading, setLoading] = useState(false);

  const fetchDashboardStats = useCallback(async () => {
    setLoading(true);
    try {
      // 确保请求路径正确
      const response = await adminAPI.getDashboardOverview();
      // 检查 response.data 结构，确保属性名匹配
      setOverview(response.data);
    } catch (error) {
      message.error(
        "获取仪表盘数据失败: " +
          (error.response?.data?.message || error.message)
      );
      console.error("Error fetching dashboard stats:", error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchDashboardStats();
  }, [fetchDashboardStats]);

  return (
    <div style={{ padding: 24 }}>
      <h2>仪表盘</h2>
      <Row gutter={16}>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="总房间数"
              value={overview.totalRooms}
              precision={0}
              valueStyle={{ color: "#3f8600" }}
              prefix={<HomeOutlined />}
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="可用房间"
              value={overview.availableRooms}
              precision={0}
              valueStyle={{ color: "#0056b3" }}
              prefix={<CheckSquareOutlined />}
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="入住中房间"
              value={overview.occupiedRooms}
              precision={0}
              valueStyle={{ color: "#d46b08" }}
              prefix={<HomeOutlined />}
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="今日收入"
              value={overview.todayRevenue}
              precision={2}
              valueStyle={{ color: "#cf1322" }}
              prefix={<DollarOutlined />}
              loading={loading}
            />
          </Card>
        </Col>
      </Row>

      <div style={{ marginTop: 24 }}>
        <h3>系统概览</h3>
        <Card bordered={false}>
          <p>欢迎使用宾馆管理系统后端</p>
          <p>您可以通过左侧菜单导航到各个功能模块</p>
          <p>
            系统状态: <span style={{ color: "green" }}>运行正常</span>
          </p>
        </Card>
      </div>
    </div>
  );
};

export default Dashboard;
